// 使用但文件组件，实现评论列表
import React from 'react';

// 自定义组件
import { http } from '../utils/utils'
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs'
import { Porm } from './components/Porm'
import { CommentList } from './components/CommentList.js'
import './App.css'; // 导入样式
import avatar from './images/avatar.png'; // 导入图片
const BlistKey = 'B-list'
class App extends React.Component {
  // constructor 定义
  // 组件的状态
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
    ],
  };

  // 发表评论
  handleAddComment = async (txt) => {
    const res = await http.post('/list', {
      author: 'ZY',
      comment: txt,
      time: new Date(),
      attitude: 0,
    })
    console.log(res);
    const list = await http.get('/list')
    this.setState({
      list: list.data.reverse()
    })
    // console.log(txt);
    // // 组装一个评论
    // const comment = {
    //   id: Math.random(),
    //   author: 'ZY',
    //   comment: txt,
    //   time: new Date(),
    //   attitude: 0,
    // };
    // // 将评论放到 list 中去
    // // this.state.list.unshift(comment);
    // this.setState({
    //   list: [comment, ...this.state.list],
    // });
  };
  //点赞
  changeAttitude = async (id, attitude) => {
    const res = await http.patch(`/list/${id}`, { attitude })
    console.log(res);
    const list = await http.get('/list')
    this.setState({
      list: list.data.reverse()
    })
    // console.log(id, attitude);
    // const newList = this.state.list.map((item) => {
    //   if (item.id === id) {
    //     return {
    //       ...item,
    //       attitude
    //     }
    //   }
    //   return item
    // })
    // this.setState({
    //   list: newList
    // })
  }
  changeSortType = (type) => {
    console.log(type);
    if (type === 'hot') {
      const newList = this.state.list.sort((a, b) => {
        return b.time.getTime() - a.time.getTime()
      })
      this.setState({
        list: newList,
        active: type
      })
    } else {
      const newList = this.state.list.sort((a, b) => {
        return a.time.getTime() - b.time.getTime()
      })
      this.setState({
        list: newList,
        active: type
      })
    }
  }
  // 删除评论按钮
  delComment = async (e, id) => {
    const res = await http.delete(`/list/${id}`)
    console.log(res);
    const list = await http.get('/list')
    this.setState({
      list: list.data.reverse()
    })
    // console.log(id);
    // // 操作数组，根据id，删除对应元素。
    // // filter 过滤数组
    // const newList = this.state.list.filter((item) => item.id !== id);
    // this.setState({
    //   list: newList,
    // });
  };
  async componentDidMount() {
    const res = await http.get('/list')
    console.log(res);
    this.setState({
      list: res.data.reverse()
    })
  }

  // 组件UI
  render() {
    // return 后边必须是一个 React 元素、其实就是虚拟DOM对象
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <CommentCount const={this.state.list.length} />

          {/* 排序tab */}
          <Tabs tabs={this.state.tabs} active={this.state.active} changeSortType={this.changeSortType} />

          {/* 发表评论区 */}
          <Porm handleAddComment={this.handleAddComment} />

          {/* 评论列表区 */}
          <CommentList list={this.state.list} changeAttitude={this.changeAttitude} delComment={this.delComment} />
        </div>
      </div>
    );
  }
}

export default App;